<template>
    <view class="content">
        <!-- <view class="main">

        </view> -->
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} </view>
                <view class="checkedInDay">连续签到7天奖励</view>
                <view class="mysteryBoxProgress">
                    <view >
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/mysteryBox.png" alt="" style="width:100%; height:auto" mode="widthFix" />
                    </view>
                    <view></view>
                </view>
    
                <!-- 记录 -->
                <view>
                    <view>参与记录</view>
                    <view class="recordList" v-for="(item,index) in recordList" :key="index">
                        <view class="checkInDate">{{item.date}}</view>
                        <view class="checkInStatus">{{item.stautus}}</view>
                    </view>
                </view>
            </view>

        </scroll-view>
        
    </view>
</template>

<script>
export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '七天签到盲盒',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            recordList:[
                {
                    date:'2024/12/20',
                    status:'已签到',
                },
                {
                    date:'2024/12/20',
                    status:'已签到',
                },
                {
                    date:'2024/12/20',
                    status:'已签到',
                },
            ]

        }
    },
    onLoad() {
      
    },
    onReady(){

    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
       
    }
}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
    background: transparent !important;
}
::v-deep .van-nav-bar__content{
    background-color: transparent !important;
}
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;
}
.title{
    font-size: 60rpx;
    line-height: 60rpx;
    text-align: left;
    color: #111111;
}
.checkedInDay{
    font-size: 28rpx;
    color: #111111;
    line-height: 28rpx;
    margin-top: 43rpx;
}
.mysteryBoxProgress{
    border-bottom:1px solid #f0f0f0;
}
.recordList{
    display:flex;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
</style>
